Expanding Nested Lists

• Item 1
  • Item 1.1
  • Item 1.2
• Item 2
  • Item 2.1
    • Item 2.1.1
    • Item 2.1.2
      • Item 2.1.2.1
      • Item 2.1.2.2
    • Item 2.1.3
  • Item 2.2
• Item 3
  • Item 3.1
  • Item 3.2
  • Item 3.3
  • Item 3.4
  • Item 3.5

This technique uses a nested list, some simple javascript, and CSS to create a expanding "tree" effect. It seems to work fairly well, but there are some issues, as I discuss below. Mostly, I haven't had the time to explore all of the issues.

Feel free to send feedback to karlnelson@earthlink.net.

The JavaScript

function toggle(id){ ul = "ul_" + id; img = "img_" + id; ulElement = document.getElementById(ul); imgElement = document.getElementById(img); if (ulElement){ if (ulElement.className == 'closed'){ ulElement.className = "open"; imgElement.src = "opened.gif"; }else{ ulElement.className = "closed"; imgElement.src = "closed.gif"; } } }

The HTML

<ul class="open"> <li id="item1"><a onclick="toggle('item1');"><img src="closed.gif" alt="" id="img_item1" border="0"></a>Item 1 <ul id="ul_item1" class="closed"> <li id="item1_1">Item 1.1</li> <li id="item1_2">Item 1.2</li> </ul> </li> <li id="item2"><a onclick="toggle('item2');"><img src="closed.gif" alt="" id="img_item2" border="0"></a>Item 2 <ul id="ul_item2" class="closed"> <li id="item2_1"><a onclick="toggle('item2_1');"><img src="closed.gif" alt="" id="img_item2_1" border="0"></a>Item 2.1 <ul id="ul_item2_1" class="closed"> <li id="item2_1_1">Item 2.1.1</li> <li id="item2_1_2"><a onclick="toggle('item2_1_2');"><img src="closed.gif" alt="" id="img_item2_1_2" border="0"></a>Item 2.1.2 <ul id="ul_item2_1_2" class="closed"> <li id="item2_1_2_1">Item 2.1.2.1</li> <li id="item2_1_2_2">Item 2.1.2.2</li> </ul> </li> <li id="item2_2_3">Item 2.1.3</li> </ul> </li> <li id="item2_2">Item 2.2</li> </ul> </li> <li id="item3"><a onclick="toggle('item3');"><img src="closed.gif" alt="" id="img_item3" border="0"></a>Item 3 <ul id="ul_item3" class="closed"> <li id="item3_1">Item 3.1</li> <li id="item3_2">Item 3.2</li> <li id="item3_3">Item 3.3</li> <li id="item3_4">Item 3.4</li> <li id="item3_5">Item 3.5</li> </ul> </li> </ul>

The HTML looks worse than it is. Basically, each item in the list has its own id, which is used to open an close specific portions of the list. The leaf nodes (non-opening and closing) don't really need ids. Every time I've used this technique in a production site, I've automatically generated the HTML using either a server side scripting language (PHP) and values pulled from a database, or XSLT run over an XML document that contains the "tree."

The CSS

.open { display: block; } .closed { display: none; } li { list-style-type: none; padding-top: .2em; padding-bottom: .2em; font-size: 18px; } li img { vertical-align: middle; }

Issues

Horizontal Spacing of Text. Ideally, you'd want the first character in each level to line up. This could pretty easily be achieved by using a spacer image (either transparent or a circle) for leaf nodes. Some CSS might work, too.

Accessibility. I don't have alt attributes set, but I imagine it wouldn't be too hard to set up some javascript to change the alts dynamically. I have no idea what this would look like in a screen reader or other piece of accessible technology.

More on Accessibility...

Michele Ide-Smith of Green Cathedral sent me a note about accessibility and this technique:

I have tested your code with Connect Outloud which is a cut down version of Jaws for Windows (a popular screen reader) and it performed very well.

A user with a screen reader is read the links one by one as if the menu is completely expanded. A good way to make it more usable for anyone with a screen reader would be to add hidden navigation controls e.g. a link around a transparent 1 pixel gif which allows a user to skip between the top level menu options. So rather than having to be read the entire menu, a user would hear "item 1" then "skip to item 2" rather than "item 1, item 1.1, item 1.2, item 2".

You could also add the access key tag to bind links to access keys e.g. a link to item 1 would be <a href="item1.html" accesskey="1">item 1</a>.

Hope that helps. I am very interested in finding the best way to create accessible navigation that is neat and works well across all browsers. This approach certainly seems to be the best I've come across so far.

I hope Michele's suggestions are useful to others. If you have anything to add, please contact me at karlnelson@earthlink.net.

Version 1.0, 3/16/04, Karl Nelson

Update (11/6/03): I found a The List posting from last year that covers pretty much the same ground.

Update (2/27/04): I added some CSS that helps vertically align the images a bit better: li img { vertical-align: middle; }. Addressing another issue, I removed the href="#" from the links. With the href="#", the browser will move up to the top of the page whenever the link is clicked; without, the list can expand and contract without moving the page. More details on this can be found on J. Blustein's page on nested lists.

Update (3/16/04): I added Michele Ide-Smith's note on accessibility. I also put the source code in text boxes for easy cut-n-pasting.

---

Visit my weblog: The Information Management Weblog, maintained by Karl Nelson, covers a variety of information related topics, including content management, knowledge management, web development, and anything else that looks interesting.